<template>
  <!-- <t-drawer
    :title="$ct('workflowApiFlowableProcessDefinitionIndex','发起流程')"
    :width="1000"
    :visible="visible"
    :confirmLoading="loading"
    :fullscreen="fullscreen"
    @close="cancel"
  > -->
  <inline-modal
    :title="'【' + json.actDeModelName + '】- 发起流程'"
    :visible="visible"
    @cancel="cancel"
  >
    <template slot="button">
      <a-button
        :style="{ marginRight: '8px' }"
        type="primary"
        @click="handleSubmit"
      >
        提交流程
      </a-button>
      <a-button
        @click="
          () => {
            $emit('cancel');
          }
        "
      >
        {{ $ct("cancel", "取消") }}
      </a-button>
    </template>
    <a-form :form="form">
      <a-spin :spinning="loading">
        <a-tabs
          v-model="currentIndex"
          @change="changCurrentTab"
          class="formTab"
        >
          <a-tab-pane key="1">
            <span slot="tab">
              <a-icon type="form" />
              {{ $ct("formFields", "表单信息") }}
            </span>

            <a-card>
              <!-- <previewModal
                class="nodeForm"
                ref="previewModal"
                :drawing-list="drawingList"
                @getJsonData="getJsonData"
              ></previewModal> -->
              <component
                ref="previewModal"
                class="nodeForm"
                :drawing-list="drawingList"
                @getJsonData="getJsonData"
                :is="plugItem"
                v-for="(plugItem, plugIndex) in plugs"
                :key="plugIndex"
                :isview="false"
              ></component>
            </a-card>
            <a-card class="margin-top">
              <a-form-item :label="$ct('workflowTitle', '流程标题')">
                <a-input
                  v-decorator="[
                    'businessTitle',
                    {
                      initialValue: businessTitle,
                      rules: [{ required: true, message: '必填' }],
                    },
                  ]"
                />
              </a-form-item>
              <a-form-item class="hiddenItem">
                <a-input v-model="procdefId" type="hidden" />
              </a-form-item>
              <a-form-item label="">
                <a-checkbox v-model="skipNode" /><span class="margin-left-xs">{{
                  $ct("skipFirstNode", "跳过第一个节点")
                }}</span>
              </a-form-item>
              <a-form-item class="hiddenItem">
                <a-input v-decorator="['assignUser']" type="hidden" />
              </a-form-item>
              <a-form-item class="hiddenItem">
                <a-input v-decorator="['duplicateUser']" type="hidden" />
              </a-form-item>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">
              <a-icon type="picture" />
              流程信息
            </span>
            <bpmn-viewer ref="bpmView" :params="params"></bpmn-viewer>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </a-form>
  </inline-modal>
</template>

<script>
// import viewForm from '../../form/formDefine/view.vue'
// import previewModal from "@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue";

import {
  setTypeList,
  loadTypeList,
  getTypeListByFiled,
} from "@/utils/formatter";
import BpmnViewer from "@/components/TopVUI/bpmn/Viewer";
import TSelectRole from "@/components/TopVUI/custom/TSelectRole";
import userPopup from "@/components/TopVUI/custom/userPopup";
export default {
  name: "apiFlowableProcessDefinitionEdit",
  components: {
    // previewModal,
    BpmnViewer,
    userPopup,
    TSelectRole,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 17,
        },
      },
      drawingList: {},
      form: this.$form.createForm(this),
      model: {},
      type: "",
      modelKey: "",
      formType: "",
      loading: false,
      formUuid: "",
      businessTitle: "",
      uuid: "",
      procdefId: "",
      fullscreen: true,
      currentIndex: "1",
      json: "",
      params: "",
      isUserPopups: false,
      isUserPopup: false,
      isDuplicate: false,
      isAssign: false,
      plugs: [],
      modelType: 0,
      saveUrl: "",
      skipNode: true,
    };
  },
  mounted() {
    this.plugs = [];
    this.plugs.push(() =>
      import(
        `@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue`
      )
    );
  },
  methods: {
    // 加载表单流程数据
    loadDataJson(e, procdefId, type, json) {
      // 清空数据
      this.isDuplicate = false;
      this.isAssign = false;
      this.skipNode = true;
      this.form.setFieldsValue({
        skipNode: false,
      });
      this.currentIndex = "1";
      this.modelKey = e;
      this.procdefId = procdefId;
      this.type = type;
      this.businessTitle = json.title;
      this.drawingList = {};
      // 获取json数据
      this.json = json.flowModel;
      this.modelType = json.flowModel.modelType;
      this.formType = json.flowModel.formType;
      this.params = json.flowModel.flowDesign;
      this.formUuid = json.flowModel.formUuid;
      // this.colSpan = this.drawingList[0].__config__.span
      if (this.modelType === "2") {
        //2为可视化，1为自定义
        this.plugs = [];
        this.plugs.push(() =>
          import(
            `@/components/TopVUI/k-form-design/packages/KFormPreview/preview.vue`
          )
        ); //默认加载表单预览页面
        this.drawingList = JSON.parse(json.flowModel.formDesign);

        this.labelCol = this.drawingList.config.labelCol;
        this.wrapperCol = this.drawingList.config.wrapperCol;
        let flowNodeField = json.flowNodeField;
        // 匹配数据字段编辑查看状态
        this.drawingList.list.forEach((e, index) => {
          if (type === 1) {
            getTypeListByFiled(e, flowNodeField);
          }
        });
        // 老版本流程表单自定义布局排序
        // this.drawingList.list = this.sortArray(this.drawingList.list, flowNodeField);
        // 传递表单数据到预览界面
        if (this.$refs.previewModal)
          this.$refs.previewModal.jsonData = this.drawingList;
        this.uuid = json.flowModel.actDeModelKey;
      } else {
        this.plugs = [];
        this.drawingList = {};
        this.plugs.push((resolve) =>
          require([`@/pages${json.flowModel.formDesign}.vue`], resolve)
        ); //动态加载外联表单页
        this.saveUrl = json.flowModel.nodeFormSaveUrl;
      }
    },
    sortArray(arr1, arr2) {
      let result = [];
      for (let i = 0; i < arr2.length; i++) {
        let key = arr2[i].filed;
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j].key === key) {
            result[i] = arr1[j];
            break;
          } else if (j === arr1.length - 1) {
            result.push(arr1[j]);
          }
        }
      }
      return result;
    },
    // tab切换
    changCurrentTab(e) {
      this.currentIndex = e;
      if (this.$refs.bpmView && this.currentIndex == "2")
        this.$refs.bpmView.initDiagramAgain(
          this.json.actDeModelId,
          this.json.actDeModelKey,
          this.json.actDeModelName,
          this.json.flowDesign
        );
    },
    toHump(name) {
      return name.replace(/\_(\w)/g, function(all, letter) {
        return letter.toUpperCase();
      });
    },
    // 提交时获取表单的数据
    getJsonData(fieldList) {
      this.loading = true;
      this.drawingList.list.forEach((e, index) => {
        let obj = setTypeList(e, fieldList);
        e = obj.e;
        fieldList = obj.list;
        return;
      });
      // 更新表单数据
      let pramar = {
        list: [],
      };
      if (this.formType == 2) {
        for (let obj in fieldList) {
          this.drawingList.list.map((item) => {
            if (item["model"] === obj) {
              pramar.list.push({
                tableName: item.tableName,
                tableField: item.model,
                fieldValue: fieldList[obj],
              });
            }
          });
        }
        if (pramar.list.length) {
          pramar.list = JSON.stringify(pramar.list);
        }
      } else {
        pramar = fieldList;
      }
      pramar.formUuid = this.formUuid;

      if (this.type === 1) {
        pramar.uuid = "";
        pramar.modelKey = this.json.actDeModelKey;
        pramar.procdefId = this.procdefId;
        this.$post("/form/formDatabase/formSave", pramar).then((res) => {
          if (res.statusCode === 200) {
            this.startProcessInstanceByKey(res.businessUuid, pramar);
          } else {
            this.$message.warn(res.message, 1.5);
            this.loading = false;
          }
        });
      } else {
        pramar.uuid = this.model.uuid;
        pramar.procdefId = this.procdefId;
        this.$post("/form/formDatabase/formUpdate", pramar).then((res) => {
          if (res.statusCode === 200) {
            this.$message.success("修改成功！", 1.5);
            this.$emit("ok");
            this.$refs.previewModal[0].resetForm();
          } else {
            this.$message.warn(res.message, 1.5);
            this.loading = false;
          }
        });
      }
    },
    handleSubmit() {
      const that = this;
      that.$confirm({
        title: "提示",
        content: "您确定要提交当前流程吗？",
        okText: "确定",
        cancelText: "取消",
        closable: true,
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          that.form.validateFields((err, values) => {
            if (!err) {
              if (that.modelType === "2") {
                that.$refs.previewModal[0].getJsonData();
              } else {
                let val = values;
                values.skipNode = that.skipNode;
                that.customizeFormStartProcessInstance(val);
              }
            }
          });
        },
      });
    },
    // 外置表单启动流程
    customizeFormStartProcessInstance(formVal) {
      let formParma = {
        modelKey: this.modelKey,
        ...formVal,
      };
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //   formParma.businessTitle = values.businessTitle;
      // formParma.assignUser = values.assignUser;
      //   }
      // });
      this.$post(
        "/workflow/apiFlowableProcessInstance/customizeFormStartProcessInstance",
        formParma
      )
        .then((res) => {
          if (res.statusCode != 300) {
            this.$message.success("流程启动成功！", 1.5);
          } else {
            this.$message.warn(res.message, 1.5);
          }
        })
        .finally(() => {
          this.$emit("ok");
          this.loading = false;
        });
    },
    // 启动流程
    startProcessInstanceByKey(e, formData) {
      this.form.validateFields((err, values) => {
        if (!err) {
          let businessTitle = values.businessTitle;
          this.$post(
            "/workflow/apiFlowableProcessInstance/startProcessInstanceByKey",
            {
              modelKey: this.modelKey,
              businessTitle: businessTitle,
              businessUuid: e,
              skipNode: this.skipNode,
              assignUser: values.assignUser,
              duplicateUser: values.duplicateUser,
              ...formData,
            }
          ).then((res) => {
            if (res.statusCode !== 300) {
              if (values.assignUser) {
                this.$post("/workflow/actMyProcessCopy/save", {
                  //是否抄送
                  userNameId: values.duplicateUser,
                  processInstanceId: res.processInstanceId,
                  processDefinitionId: res.processDefinitionId,
                  formName: businessTitle,
                })
                  .then((res) => {
                    if (res.status !== 300) {
                      this.$message.success("流程启动成功！", 1.5);
                      this.$refs.previewModal[0].resetForm();
                    } else {
                      this.$message.warn(res.message, 1.5);
                    }
                  })
                  .finally(() => {
                    this.$emit("ok");
                    this.loading = false;
                  });
              } else {
                this.$message.success("流程启动成功！", 1.5);
                this.$emit("ok");
                this.$refs.previewModal[0].resetForm();
                this.loading = false;
              }
              let pramer = {
                actDeModelKey: this.json.actDeModelKey,
                formDesign: JSON.stringify(this.drawingList),
                formModel: JSON.stringify(this.drawingList.config),
                processInstanceId: res.processInstanceId,
                procdefId: res.processDefinitionId,
                formUuid: this.formUuid,
              };
              this.$post("/workflow/flowModel/updateFormDesign", pramer).then(
                (res) => {
                  // console.log("res======", res);
                }
              );
            } else {
              this.$message.warn(res.message, 1.5);
              this.loading = false;
            }
          });
        }
      });
    },
    activeFormItem(currentItem, index) {
      this.drawingList[index] = currentItem;
    },
    cancel() {
      if (this.modelType === "2") {
        this.$refs.previewModal[0].resetForm();
      } else {
        this.form.resetFields(); // 清理表单数据（可不做）
      }
      this.$emit("cancel");
    },
    // 抄送
    changeDuplicate(e) {
      this.isDuplicate = e.target.checked;
      if (!this.isDuplicate) {
        this.form.setFieldsValue({
          duplicateUser: "",
          duplicateUserName: "",
        });
      }
    },
    // 下一节点处理人
    changeAssign(e) {
      this.isAssign = e.target.checked;
      if (!this.isAssign) {
        this.form.setFieldsValue({
          assignUser: "",
          assignUserName: "",
        });
      }
    },
    // 设置抄送、节点处理人
    setUser(val, type) {
      if (type == 2) {
        this.form.setFieldsValue({
          assignUser: val.userNameId,
          assignUserName: val.userName,
        });
      } else {
        this.form.setFieldsValue({
          duplicateUser: val.userNameId,
          duplicateUserName: val.userName,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-form {
  height: auto;
  width: 100%;
}

/* /deep/.ant-modal-footer {
		border: none !important;
	} */
.ant-modal-footer button + button {
  display: initial !important;
}
.my-bpmn-con .bpmn-viewer-content {
  height: calc(100vh - 42px - 53px - 50px - 70px) !important;
  min-height: calc(100vh - 42px - 53px - 50px - 70px) !important;
}
/* .nodeForm {
		max-height: calc(100vh - 42px - 53px - 50px - 300px);
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
	} */
.work-form .ant-modal-body {
  overflow: hidden;
  overflow-y: auto;
}
/deep/.formTab.ant-tabs.ant-tabs-top.ant-tabs-line {
  height: calc(100vh - 210px) !important;
}
/deep/.ant-tabs-tabpane.ant-tabs-tabpane-active {
  overflow: auto;
  height: calc(100vh - 266px) !important;
}
.page-common-layout .page-common-content .ant-tabs-content .ant-card {
  height: auto !important;
}
</style>
